import React, { useState, useEffect, useRef, memo } from 'react';
import '../index.less';
import cls from 'classnames';
import styles from './rightPanel.less';
// import CustomPanel from '@/components/containers/customPanel';
import { connect, useSelector } from 'umi';
import InvestPointChart from './InvestPointChart';
// import { listAllSafetyIndex } from '@/services/bimServices';
import { getProjSafetyIndex } from '../../../../../services/kanbanServices';

// 右上面板
const RightPanel = () => {
  const [list, setList] = useState(null);
  const [renderList, setRenderList] = useState([]);
  const kanLvl = useSelector(s => s.kanban.level);
  // const list = useSelector(s => s.kanban.safeIndexArr);

  useEffect(() => {
    getProjSafetyIndex().then(response => {
      if (response.data && response.data.code === 200) {
        setList(response.data.data);
      }
    });
  }, []);
  useEffect(() => {
    if (list) {
      setRenderList(kanLvl === 'project' ? list.projectInfo : list.sectionProjectInfo);
    }
  }, [list, kanLvl]);

  return (
    <div className="side-panel2" style={{ top: 88, right: 24, width: 370 }}>
      <div className="side-panel2-title flex-spb">项目情况</div>
      <div
        className={cls('side-panel2-body', styles.autoHeightPanel)}
        style={{
          padding: 16,
          height: 'calc(100vh - 470px)',
        }}
      >
        <div className="side-panel2-subtitle">安全生产指数排名</div>
        <div className={styles.list}>
          <div className={styles.listHeader}>
            <span>排名</span>
            <span>项目名称</span>
            <span>评分</span>
          </div>
          <div className={styles.listHeaderStub} />
          <div className={styles.listBody}>
            {/* .sort((a, b) => b.safeProduceIndex - a.safeProduceIndex) */}
            {!!renderList.length &&
              renderList
                .slice(0, 10)
                .sort((a, b) => b.safeProduceIndex - a.safeProduceIndex)
                .map(({ safeProduceIndex, projectId, projectName, projectFullName }, i) => {
                  return (
                    <div key={projectId} className={styles.listBodyItem} title={projectFullName}>
                      <span>{i + 1}</span>
                      <span>{projectName}</span>
                      <span>{(safeProduceIndex * 100).toFixed()}</span>
                    </div>
                  );
                })}
          </div>
          <div className={styles.listHint}>暂无更多数据</div>
        </div>

        <div className="side-panel2-subtitle" style={{ marginTop: 24 }}>
          投资指标分析
        </div>
        <InvestPointChart />
      </div>
    </div>
  );
};

export default RightPanel;
